<template>
  <div class="shopping-cart">
    <nav-bar text-color="#fff" bg-color="#ff8198">
      <div slot="center">购物车({{ total }})</div>
    </nav-bar>
    <b-scroll ref="bScroll" :b-scroll-object="bScrollObject">
      <cart-list :shop-cart-list="allCartList"/>
    </b-scroll>
    <cart-bottom :is-select-all="isSelectAll" :total-money="allSelectAllMoney"/>
  </div>
</template>

<script>
import BScroll from "@/components/component/bScroll/BScroll";

import NavBar from "@/components/component/navBar/NavBar";

import CartList from "./childComponent/CartList";
import CartBottom from "./childComponent/CartBottom";

import {BScrollClass} from "@/common/constant";

export default {
  name: "ShoppingCart",
  data() {
    return {
      bScrollObject: new BScrollClass().setExcessHeight(137).setImgLoadFunName("cartImgLoad")
    }
  },
  components: {
    NavBar,
    BScroll,
    CartList,
    CartBottom
  },
  computed: {
    allCartList() {
      return this.$store.getters.allCartList;
    },
    total() {
      return this.allCartList.length;
    },
    allSelectAllMoney() {
      return this.$store.getters.allSelectAllMoney;
    },
    isSelectAll() {
      return this.$store.getters.isSelectAll;
    }
  },
  activated() {
    this.$refs.bScroll.refresh();
  }
}
</script>

<style scoped>
.shopping-cart {
  height: 100vh;
}
</style>